<template>
  <ui-popover
    v-model="showPopover"
    class="ui-page-home-setting"
    placement="bottom-end"
  >
    <ui-button slot="reference" size="small">
      <span class="ui-page-home-setting__icon" />
    </ui-button>
    <div class="ui-page-home-setting__main">
      <div class="ui-page-home-setting__action" :class="{'is-disabled': isCurrent}" @click="handleSetHomeClick">将当前页设为首页</div>
      <div v-if="isCurrent" class="ui-page-home-setting__tips">当前页已是首页</div>
    </div>
  </ui-popover>
</template>
<script>
import UiPopover from '../popover'
import Message from '../message'

export default {
  name: 'UiPageHomeSettig',
  props: {
    homeUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showPopover: false,
      currentHomeUrl: window.localStorage.getItem('homeUrl')
    }
  },
  components: {
    UiPopover
  },
  computed: {
    isCurrent() {
      return this.resolveHomeUrl === this.currentHomeUrl
    },
    resolveHomeUrl() {
      return this.$router.resolve(this.homeUrl).href
    }
  },
  methods: {
    handleSetHomeClick() {
      if (this.isCurrent) {
        return
      }
      window.localStorage.setItem('homeUrl', this.resolveHomeUrl)
      this.currentHomeUrl = this.resolveHomeUrl
      Message.success('设置成功')
      this.showPopover = false
    }
  }
}
</script>
<style lang="less">
.ui-page-home-setting__main{
  padding: 6px 0;
}
.ui-page-home-setting__action{
  line-height: 24px;
  padding: 4px 12px;
  transition: all .25s;
  &.is-disabled {
    color: #999;
  }
  &:not(.is-disabled){
    cursor: pointer;
    &:hover {
      background-color: #f8f8f9;
    }
  }
}
.ui-page-home-setting__tips{
  line-height: 24px;
  padding: 4px 12px;
}
.ui-page-home-setting__icon {
  position: relative;
  margin-top: 5px;
  width: 3px;
  height: 3px;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  background-color: #999;
  &:after, &:before{
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #999;
    position: absolute;
    top: 0;
  }
  &:before{
    left: -5px;
  }
  &:after{
    right: -5px;
  }
}
</style>
